<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			img{
				width: 500px;
				height: 300px;
			}
			body{
				background-color: royalblue;
			}
			div{
				position: absolute;
				padding: 5px;
				background: #FFFFFF;
				box-shadow: 10px 10px 10px #808080;
			}
			.pic1{
				top: 50px;
				left: 50px;
				z-index: 1;
			}
			.pic2{
				top: 50px;
				left: 690px;
				z-index: 1;
			}
			.pic3{
				top: 100px;
				left: 100px;
				z-index: 2;
			}
			.pic4{
				top: 100px;
				left: 638px;
				z-index: 2;
			}
			.pic5{
				top: 152px;
				left: 392px;
				z-index: 3;
			}
		</style>
	</head>
	<body>
		<div class="pic1"><img src="img/photo0.png"/></div>
		<div class="pic2"><img src="img/photo1.jpg"/></div>
		<div class="pic3"><img src="img/photo2.jpg"/></div>
		<div class="pic4"><img src="img/photo3.jpg"/></div>
		<div class="pic5" title="selt"><img src="img/photo4.jpg"/></div>
	</body>
	<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
	<script type="text/javascript">
		$(function(){
			$('div').click(function(){
				//找到最上面的图片 获取图片的topleftz-index
				var top1=$('div[title=selt]').css('top');
				var left1=$('div[title=selt]').css('left');
				var zindex1=$('div[title=selt]').css('z-index')
				//找到鼠标点击的那张图片
				var top2=$(this).css('top');
				var left2=$(this).css('left');
				var zindex2=$(this).css('z-index');
				$('div[title=selt]').stop(true,true).animate({'top':top2,'left':left2},1000).css('z-index',zindex2).removeAttr('title');
				$(this).stop(true,true).animate({'top':top1,'left':left1}).css('z-index',zindex1).attr('title','selt')
			})
		})
	</script>
</html>
